<script lang="ts" setup name='Footer'>

</script>
<template>
    <footer class="footer">
        <div class="footer-content">
            <el-divider></el-divider>
        </div>
        <div class="footer-bottom">
            <div class="footer-logo">
                <h2 class="header-title">AIToEdu</h2>
                <img src="@/assets/logo.png" style="height: 40px">
            </div>
            <div class="footer-copy">
                <a href="#privacy">使用指南</a> |
                <a href="#service-terms">开发者信息</a> |
                <a href="#cookie-settings">联系我们</a>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
        </div>
    </footer>
</template>
<style scoped>
.footer-up {
    background-image: url("@/assets/svg/welcome/footer-background.svg");
    height: 170px;
    background-size: cover;
}

.footer {
    background-color: #409eff;
    /* 页脚背景颜色 */
    color: white;
    /* 页脚字体颜色 */
    padding: 50px;
    /* 页脚内边距 */
}

.footer .footer-content {
    display: flex;
    flex-wrap: wrap;
    /* 允许换行 */
    justify-content: space-between;
    gap: 20px;
}

.footer .footer-content div:nth-child(1) {
    align-content: center;
}

.footer .footer-logo {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    margin-left: 5%;
}

.footer .footer-logo h2 {
    margin-right: 10px;
}

.footer h3 {
    margin-bottom: 10px;
    /* 标题下方的间距 */
}

.footer a {
    color: white;
    /* 链接颜色 */
    text-decoration: none;
    /* 去掉链接下划线 */
    display: block;
    /* 块级显示 */
    margin-bottom: 5px;
    /* 链接下方的间距 */
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.footer-bottom .footer-copy {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    text-align: center;
    gap: 30px;
}
</style>